<template>
	<view class="content">
		<image class="backimg" src="/static/index.png"></image>
		<view class="header">
			<text class="logotext">字节云</text>
			<view class="list">
				<view class="item" @click="recharge">
					<image src="/static/chongzhi.png" mode=""></image>
					<text>充值</text>
				</view>
				<view class="item" @click="withdrawal">
					<image src="/static/tixian.png" mode=""></image>
					<text>提现</text>
				</view>
				<view class="item" @click="notice">
					<image src="/static/ggonggao.png" mode=""></image>
					<text>公告</text>
				</view>
				<view class="item">
					<image src="/static/kefu.png" mode=""></image>
					<text>联系客服</text>
				</view>
			</view>
		</view>
		<view class="product" v-if="list.length" @click="powerDetail(list[0].id)">
			<view class="top">
				<text>{{list[0].title}}</text>
				<view class="tags">
					<text>个人服务器</text>
					<text>单份算力·{{list[0].computingPower}}T</text>
				</view>
			</view>
			<view class="center">
				<view class="">
					<text class="yield">{{list[0].historyIncome}}</text>
					<text class="ts">历史收益率</text>
				</view>
				<view class="">
					<text class="yield black">{{list[0].lockPeriod}}</text>
					<text class="ts">锁定期</text>
				</view>
			</view>
			<view class="bottom">
				<text>{{list[0].startTime}}开挖</text>
				<text class="line"></text>
				<text>灵活便利</text>
			</view>
		</view>
		<image src="/static/hongbao.png" class="ad" mode=""></image>
		<text class="title">精选产品</text>
		<view class="product" v-for="item in list"  @click="powerDetail(item.id)">
			<view class="top">
				<text>{{item.title}}</text>
				<view class="tags">
					<text>个人服务器</text>
					<text>单份算力·{{item.computingPower}}T</text>
				</view>
			</view>
			<view class="center">
				<view class="">
					<text class="yield">{{item.historyIncome}}</text>
					<text class="ts">历史收益率</text>
				</view>
				<view class="">
					<text class="yield black">{{item.lockPeriod}}</text>
					<text class="ts">锁定期</text>
				</view>
			</view>
			<view class="bottom">
				<text>{{item.startTime}}开挖</text>
				<text class="line"></text>
				<text>灵活便利</text>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {productList} from '@/util/api.js'
	import { onMounted, ref } from 'vue';
	
	const page = ref(1)
	const list = ref([])
	onMounted(()=>{
		getList()
	})
	const getList = async ()=>{
		const result = await productList({limit:15,page:page.value})
		
		if(page.value==1){
			list.value = result.data.records
		}else{
			list.value = list.value.concat(result.data.records)
		}
	}
	const recharge = ()=>{
		const token = uni.getStorageSync('token')
		if(!token){
			uni.showModal({
				title:"提示",
				content:"检测到您还未登录，需要先去登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}
				}
			})
		}else{
			uni.navigateTo({
				url:"/pages/recharge/recharge"
			})
		}
		
	}


	const withdrawal = () =>{
		const token = uni.getStorageSync('token')
		if(!token){
			uni.showModal({
				title:"提示",
				content:"检测到您还未登录，需要先去登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}
				}
			})
		}else{
			uni.navigateTo({
				url:"/pages/withdrawal/withdrawal"
			})
		}
		
	}

	const notice = ()=>{
		uni.navigateTo({
			url:"/pages/niotice/niotice"
		})
	}
	const  powerDetail = (id)=>{
		const token = uni.getStorageSync('token')
		if(!token){
			uni.showModal({
				title:"提示",
				content:"检测到您还未登录，需要先去登录",
				success: (ret) => {
					if(ret.confirm){
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}
				}
			})
		}else{
			uni.navigateTo({
				url:"/pages/powerDetail/powerDetail?id="+id
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background: #f8f8f8;
	}
	.backimg{
		width: 750rpx;
		height: 540rpx;
		display: block;
		position: absolute;
	}
	.header{
		position: relative;
		padding: 32rpx;
		.logotext{
			color: #fff;
			font-size: 36rpx;
			display: block;
			font-weight: bold;
			margin-top: 120rpx;
		}
		.list{
			display: flex;
			padding: 0 36rpx;
			margin-top: 50rpx;
			justify-content: space-between;
			.item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image{
					display: block;
					width: 56rpx;
					height: 56rpx;
					padding: 16rpx;
					background: #fff;
					border-radius: 32rpx;
				}
				text{
					color: #fff;
					font-size: 26rpx;
					margin-top: 15rpx;
				}
			}
		}
	}
	.product{
		width: 686rpx;
		height: 284rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 10rpx auto 30rpx;
		position: relative;
		overflow: hidden;
		.top{
			display: flex;
			margin: 30rpx 32rpx;
			>text{
				color: #181D29;
				font-size: 28rpx;
				font-weight: 500;
				margin-right: 30rpx;
			}
			.tags{
				display: flex;
				text{
					color: #1E53E7;
					font-size: 24rpx;
					height: 32rpx;
					padding: 0 10rpx;
					line-height: 32rpx;
					margin-right: 15rpx;
					border-radius: 4rpx;
					display: block;
					border: 2rpx solid rgba(30,83,231,0.45);
				}
			}
		}
		.center{
			display: flex;
			margin: 0 32rpx;
			view{
				display: flex;
				flex-direction: column;
				margin-right: 60rpx;
				align-items: flex-start;
				.yield{
					color: #F53B47;
					font-size: 48rpx;
					font-weight: 500;
				}
				.black{
					color:#181D29 ;
				}
				
				.yield::after{
					content:"%";
					font-size: 26rpx;
				}
				.black::after{
					content:"天";
					font-size: 26rpx;
				}
				.ts{
					color: #A3A7B2;
					font-size: 26rpx;
					display: block;
					margin-top: 0rpx;
				}
			}
		}
		.bottom{
			width: 622rpx;
			height: 44rpx;
			background: linear-gradient(90deg,  #F4F6FC 0%,rgba(244,246,252,0) 100%);
			border-radius: 4rpx;
			margin: 20rpx 32rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			text{
				color: #181D29;
				font-size: 24rpx;
				display: block;
			}
			.line{
				background: #A3A7B2;
				width: 2rpx;
				height: 20rpx;
				margin: 0 15rpx;
			}
		}
		
	}
	.ad{
		width: 686rpx;
		height: 192rpx;
		display: block;
		margin: -20rpx auto 30rpx;
	}
	.title{
		color: #181D29;
		font-size: 36rpx;
		font-weight: 500;
		display: block;
		margin: 32rpx;
	}
















</style>
